<template>
  <view class="mine-container">
    <!-- 顶部用户信息 -->
    <view class="user-section">
      <view class="avatar">
        <text class="avatar-icon">👤</text>
      </view>
      <view class="user-info">
        <view class="info-row">
          <text class="username">{{ username }}</text>
          <text class="phone">{{ phone }}</text>
        </view>
        <view class="info-row">
          <text class="register-label">注册时间：</text>
          <text class="register-date">{{ registerDate }}</text>
        </view>
      </view>
    </view>

    <!-- 菜单列表 -->
    <view class="menu-list">
      <!-- 清除缓存 -->
      <view class="menu-item" @click="clearCache">
        <view class="menu-left">
          <text class="menu-icon">🗑️</text>
          <text class="menu-title">清除缓存</text>
        </view>
        <text class="menu-arrow">›</text>
      </view>

      <!-- 我的设置 -->
      <view class="menu-item" @click="goToSettings">
        <view class="menu-left">
          <text class="menu-icon">⚙️</text>
          <text class="menu-title">我的设置</text>
        </view>
        <text class="menu-arrow">›</text>
      </view>
    </view>

    <!-- 退出账号按钮 -->
    <view class="logout-container">
      <button class="logout-button" @click="handleLogout">退出账号</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: "王伟",
      phone: "13572032263",
      registerDate: "2019-03-12",
    };
  },
  onLoad() {
    // 检查登录状态
    const isLogin = uni.getStorageSync("isLogin");
    if (!isLogin) {
      uni.reLaunch({
        url: "/pages/login/login",
      });
      return;
    }

    // 获取用户名
    const storedUsername = uni.getStorageSync("username");
    if (storedUsername) {
      this.username = storedUsername === "admin" ? "王伟" : storedUsername;
    }
  },
  methods: {
    // 清除缓存
    clearCache() {
      uni.showModal({
        title: "提示",
        content: "确定要清除缓存吗？",
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: "缓存已清除",
              icon: "success",
              duration: 1500,
            });
          }
        },
      });
    },

    // 跳转到设置页面
    goToSettings() {
      uni.navigateTo({
        url: "/pages/mine/setting",
      });
    },

    // 退出登录
    handleLogout() {
      uni.showModal({
        title: "提示",
        content: "确定要退出账号吗？",
        success: (res) => {
          if (res.confirm) {
            // 清除登录状态
            uni.removeStorageSync("isLogin");
            uni.removeStorageSync("username");

            uni.showToast({
              title: "已退出",
              icon: "success",
              duration: 1500,
            });

            setTimeout(() => {
              uni.reLaunch({
                url: "/pages/login/login",
              });
            }, 1500);
          }
        },
      });
    },
  },
};
</script>

<style scoped>
.mine-container {
  height: 100vh;
  background: #f5f5f5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 顶部用户信息 */
.user-section {
  background: #ffffff;
  padding: 40rpx 30rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  background: #e5e5e5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
}

.avatar-icon {
  font-size: 50rpx;
  color: #999999;
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.info-row:last-child {
  margin-bottom: 0;
}

.username {
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
  margin-right: 20rpx;
}

.phone {
  font-size: 28rpx;
  color: #666666;
}

.register-label {
  font-size: 24rpx;
  color: #999999;
}

.register-date {
  font-size: 24rpx;
  color: #666666;
}

/* 菜单列表 */
.menu-list {
  background: #ffffff;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-left {
  display: flex;
  align-items: center;
}

.menu-icon {
  font-size: 36rpx;
  margin-right: 20rpx;
}

.menu-title {
  font-size: 30rpx;
  color: #333333;
}

.menu-arrow {
  font-size: 50rpx;
  color: #cccccc;
  font-weight: 300;
}

/* 退出账号按钮 */
.logout-container {
  position: fixed;
  bottom: 120rpx;
  left: 0;
  right: 0;
  padding: 30rpx;
}

.logout-button {
  width: 100%;
  height: 100rpx;
  background: linear-gradient(135deg, #4375fb 0%, #8e6bfd 100%);
  border-radius: 50rpx;
  border: none;
  font-size: 32rpx;
  color: #ffffff;
  font-weight: 500;
  line-height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.logout-button::after {
  border: none;
}
</style>
